<template>
  <div id="wrapper" ref='wrapper'>
    <slot></slot>
  </div>
</template>

<script>
import Iscroll from 'iscroll/build/iscroll-probe'
export default {
  name: 'ScrollView',
  mounted () {
    this.iscroll = new Iscroll(this.$refs.wrapper, {
      mouseWheel: true,
      scrollbars: false,
      probeType: 3,
      // 解决拖拽卡顿问题
      scrollX: false,
      scrollY: true,
      disablePionter: true,
      diasbleTouch: false,
      disableMouse: true
    })
    // setTimeout(() => {
    //   this.iscroll.refresh()
    //   console.log(this.iscroll.maxScrollY)
    // }, 1000)
    const obs = new MutationObserver((mutationlist, observer) => {
      this.iscroll.refresh()
      // console.log(this.iscroll.maxScrollY)
    })
    const config = {
      childList: true, // 观察目标子节点的变化，是否有添加或者删除
      attributes: true, // 观察属性变动
      subtree: true, // 观察后代节点，默认为false
      attributeFilter: ['height', 'offsetHeight']// 观察特定属性变动
    }
    obs.observe(this.$refs.wrapper, config)
  },
  data () {
    return {

    }
  },
  methods: {
    scrolling (fn) {
      this.iscroll.on('scroll', function () {
        fn(this.y)
      })
    },
    reFresh () {
      setTimeout(() => {
        this.iscroll.refresh()
      }, 100)
    },
    scrollTo (x, y, time) {
      this.iscroll.scrollTo(x, y, time)
    },
    maxScrollY () {
      return this.iscroll.maxScrollY
    }
  },
  components: {
  }
}
</script>

<style scoped lang='scss'>
  #wrapper{
    width: 100%;
    height: 100%;
    // overflow: hidden;
  }
</style>
